<script setup lang="ts">
import { type PropType, computed, ref } from 'vue'
import type { ShopOrder } from '@/pages/order/types'
import { orderStatusResponsibility } from '@/libs/orderStatus'
import { useOrderStoreMap } from '@/store/modules/order'

/**
 * 商铺信息导航
 * @property {isDetail} 详情展示方式 默认列表
 */
const $props = defineProps({
  isDetail: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object as PropType<ShopOrder>,
    default() {
      return {}
    },
  },
  showCheckbox: {
    type: Boolean,
    default: false,
  },
})
const $useOrderStoreMap = useOrderStoreMap()
const check = computed(() => $useOrderStoreMap.orderMap.get($props.info.orderNo))

const handleCheck = (e: { value: boolean; name: string }) => {
  $useOrderStoreMap.SET_ORDER_MAP_Item($props.info.orderNo, e.value)
}
</script>

<template>
  <view class="nav__item-header">
    <view class="nav__item-header--left">
      <u-checkbox v-if="$props.showCheckbox" v-model="check" @change="handleCheck"></u-checkbox>
      <u-image width="40rpx" height="40rpx" shape="circle" :src="$props.info.shopLogo" />
      <text class="f13 fontBold" style="margin-left: 24rpx">{{ $props.info.shopName }}</text>
      <text class="f13" style="margin-left: 14rpx">></text>
    </view>
    <view v-if="!$props.isDetail" class="nav__item-header--righ" style="color: #f12f22">{{ orderStatusResponsibility($props.info) }}</view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/assets/css/mixins/mixins.scss';
@include b(nav) {
  @include e(item-header) {
    @include flex(space-between);
    height: 90rpx;
    @include m(left) {
      @include flex();
    }
    @include m(right) {
      color: #f12f22;
    }
  }
}
</style>
